import $ from '../library/jquery.js';
import cookie from '../library/cookie.js';

let shop=cookie.get('shop');
console.log(shop);
shop = JSON.parse(shop);
let idList = shop.map(el => el.id).join();

$.ajax({
    type: "get",
    url: "../interface/shop.php",
    data: { idList },
    dataType: "json"
}).then(res => {
    
    let template = '';
    // let pri='';
    res.forEach(el => {
        let pic = JSON.parse(el.picture);
        
        let currentData = shop.filter(elm => elm.id === el.id);
        // console.log(currentData);
        // console.log(currentData[0].num);
        
        let pri=0;
        pri += currentData[0].num;
        $(".row2>.col2>span").html(pri);
        template += `
        <div class="row">
                <div class="col1">
                <input type="checkbox" name="" id="">
                    </div>  
                <div class="col2">
                    <img src="./${pic[0].src}" alt="">
                </div>
                <div class="col3">${el.title}</div>
                <div class="col4">
                <span class="col4-1">${el.price}</span>元</div>
                <div class="col5">
                <span class='jian'  data-jian="${el.id}">-</span><input type="text" value="${currentData[0].num}" class="a"><span class='jia' data-jia="${el.id}">+</span>
                </div>
                <div class="col6">
                <span class="col6-1">${(el.price * currentData[0].num)}</span>元</div>
                <div class="col7"><a href="javascript:;" class="removeitem" data-id="${el.id}">x</a></div>
            </div>
            `;


    });

    $('.center').html(template);
    $('.center .removeitem').on('click', function() {
        let shop=cookie.get('shop');
        shop=JSON.parse(shop);
        let result = shop.filter(el => el.id != $(this).attr('data-id'));
        cookie.set('shop', JSON.stringify(result));
        $(this).parent().parent().remove();
    });

    


    $(function(){
        // 点击加数量
        $('.jian').on('click',function(){

            // 保存点击cookie
            let numb=$(this).attr('data-jian');
                shop.forEach(el=>{
                    if(el.id==numb){
                        if(el.num!=1){
                            el.num--;
                        };
                        console.log(el.num);
                    };
                cookie.set('shop',JSON.stringify(shop));
                
                });

            
            let val = $(this).siblings('input').val();
            console.log(val);
            if(val!=1){
                +val--;
            $(this).siblings('input').val(val);
            $(this).parent().parent().find('.col6-1').html($(this).parent().parent().find('.col4-1').html()*val);
            };
            let prc=0;
            $('.col6-1').each((i,el)=>{
                prc+= +$(el).html();
            });
            $(".col6-2").html(prc);
        })

        // 点击减数量
        $('.jia').on('click',function(){

            // 保存点击cookie
            let numb=$(this).attr('data-jia');
            shop.forEach(el=>{
                if(el.id==numb){
                    el.num++;
            };
            cookie.set('shop',JSON.stringify(shop));
        
            })


            let val = $(this).siblings('input').val();
            console.log(val);
            +val++;
            $(this).siblings('input').val(val);

            $(this).parent().parent().find('.col6-1').html($(this).parent().parent().find('.col4-1').html()*val);
   
        });

        // 单选全选
        let items=$('.row>.col1>input');
        $('.nav1>.col>.col1>input').on('click',function(){
            items.prop('checked',$(this).prop('checked'));

        //判断底部总价
            if($(this).prop('checked')){
            let prc=0;
            $('.col6-1').each((i,el)=>{
                prc+= +$(el).html();
            })
            $(".col6-2").html(prc);  
            }else{
                $(".col6-2").html(0);
            }

        });
        // 单选全选
        function ischeck(){
            const elms=Array.from(items);
            return elms.every(el=>$(el).prop('checked'));
        }
        items.on('click',function(){
            $('.nav1>.col>.col1>input').prop('checked',ischeck());
        })

    })


}).catch(xhr => {
    console.log(xhr);
});







// $(function(){
//     $('.center-center-body>ul>li').on('mouseover',function(){
//         $('.center-shop').css('top','245px');
//     })
//     $('.center-center-body>ul>li').on('mouseleave',function(){
//         $('.center-shop').css('top','300px');
//     })
//     // $('.center-censter-body>ul>li').on({
//     //     mouseover(){
//     //         alert(1);
//     //           $('.center-shop').css('top','245px');
//     //     }
//     // },'.center-shop')
    
    
// });